<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no" />
    <title>证件扫描</title>
    <!--标准mui.css-->
    <link rel="stylesheet" href="../css/mui.min.css" />
    <script src="../js/mui.min.js"></script>
    <!--App自定义的css-->
    <script src="../js/flexible.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/app.css" />
    <link rel="stylesheet" href="../npl/css/vant.mini.css" />
    <script src="../js/vue.js"></script>
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/sm2.js"></script>
    <script src="../js/sm3.js"></script>
    <script src="../js/sm4.js"></script>
    <script src="../js/feedback.js"></script>
    <script src="../js/clipboard.js"></script>
    <script src="../wx/uap.js"></script>
    <script src="../js/vconsole.min.js"></script>
    <script src="../npl/js/vant.mini.js"></script>
    <script src="./text.js" type="text/javascript"></script>
    <script src="./index1.js"></script>
    <style>
        .left {
            text-align: center;
        }

        .left a {
            line-height: 0.5rem;
            color: #fff;
        }

        .left .left1 {
            position: absolute;
            left: 0.1rem;
            top: 0.25rem;
        }

        .left :nth-child(1) span {
            line-height: 0.5rem;
            color: #fff;
        }

        .left :nth-child(2) span {
            line-height: 0.5rem;
            color: #fff;
        }

        .file-input {
            opacity: 0;
            height: 100%;
            width: 100%;
            z-index: 1;
            position: absolute;
            left: 0;
            top: 0;
        }

        .top {
            height: 8rem;
            width: 100%;
            box-sizing: border-box;
            font-size: 0.3rem;
            position: relative;
            border-radius: 10px;
            padding: 0.3rem;
            margin-bottom: 0.3rem;
            position: relative;
            margin-top: 1rem;
            background: #fff;
        }

        .bgcImg {
            width: 60%;
            height: 3rem;
            margin: 0 auto;
            background: url("../image/document.png") center;
            background-size: 140% 190%;
            margin-top: 1.5rem;
            margin-bottom: 2.3rem;
        }

        .frontandback {
            font-size: 0.35rem;
            padding: 0.1rem 0.2rem;
        }

        .form {
            padding: 0.2rem;
            line-height: 0.5rem;
            margin: 0.2rem 0.2rem 0.2rem;
        }

        .line1 {
            position: absolute;
            top: 0;
            left: 0px;
            width: 100%;
            height: 100%;
            z-index: 111;
        }

        .line {
            position: absolute;
            top: 0.6rem;
            left: 0px;
            width: 100%;
            height: 7.2rem;
            z-index: 111;
        }

        .lineFlag {
            display: none;
            width: 100%;
            -webkit-animation: bounce-down 2s linear infinite;
            animation: bounce-down 2s linear infinite;
        }

        @-webkit-keyframes bounce-down {
            25% {
                -webkit-transform: translateY(0.15rem);
            }

            50% {
                -webkit-transform: translateY(4rem);
            }

            100% {
                -webkit-transform: translateY(7rem);
            }
        }

        @keyframes bounce-down {
            25% {
                transform: translateY(7rem);
            }

            50% {
                transform: translateY(4rem);
            }

            100% {
                transform: translateY(0.15rem);
            }
        }

        .mui-toast-container {
            top: 50%;
        }

        .form .title1 {
            font-size: 0.35rem;
            font-weight: 600;
            color: #333;
            margin-bottom: 0.2rem;
        }

        .clipboardContent {
            background-color: rgb(251, 247, 247);
            padding: 0.4rem 0.53rem;
            position: relative;
            height: calc(100vh - 3.5rem);
        }

        .clipboardContent img {
            width: 0.3rem;
        }

        .content1 {
            background-color: rgb(251, 247, 247);
            border: none;
            overflow: scroll;
            height: 100%;
            padding: 0.1rem 0.2rem;
            word-wrap: break-word;
        }

        .frontandback .bottom2 {
            position: absolute;
            bottom: 0;
            right: 0;
            margin-right: 0.2rem;
            margin-bottom: 0.2rem;
            width: 0.3rem;
        }

        .frontandback .left2 {
            position: absolute;
            top: 0;
            right: 0;
            margin-right: 0.2rem;
            margin-top: 0.2rem;
            width: 0.3rem;
        }

        .frontandback .left1 {
            position: absolute;
            top: 0;
            left: 0;
            margin-left: 0.2rem;
            margin-top: 0.2rem;
            width: 0.3rem;
        }

        .frontandback .bottom1 {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0.3rem;
            margin-left: 0.2rem;
            margin-bottom: 0.2rem;
        }

        .topImg .bottom2 {
            position: absolute;
            top: 0;
            left: 0;
            margin-left: 0.2rem;
            padding-top: 0.2rem;
            width: 0.3rem;
        }

        .bottomImg .left2 {
            position: absolute;
            bottom: 0;
            left: 0;
            margin-left: 0.2rem;
            width: 0.3rem;
            padding-bottom: 0.2rem;
        }

        .bottomImg .left1 {
            position: absolute;
            bottom: 0;
            right: 0;
            margin-right: 0.2rem;
            width: 0.3rem;
            padding-bottom: 0.2rem;
        }

        .topImg .bottom1 {
            position: absolute;
            right: 0;
            top: 0;
            width: 0.3rem;
            margin-right: 0.2rem;
            padding-top: 0.2rem;
        }
        .back_l {
    width: 37px;
    height: 37px;
}
.back_l img {
    width: 100%;
    height: 100%;
}
.foot {
            position: fixed;
            bottom: 0px;
            left: 0px;
            padding: 0.2rem;
            width: 100%;
            text-align: center;
            display: flex;
            justify-content: space-around;
        }

        .del_btn1 {
            width: 45%;
            height: 40px;
            /* box-shadow: 0px 16px 16px 0px rgba(4, 124, 137, 0.05); */
            /* border-radius: 8px; */
            background-color: rgba(45, 52, 60, 0.07);
            border-radius: 48px;
            color: rgba(45, 52, 60, 0.8);
            font-size: 16px;
            font-family: PingFang SC;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
        }

        .del_btn2 {
            width: 45%;
            height: 40px;
            background-color: #0E7677;
            border-radius: 48px;
            color: #fff;
            font-weight: 600;
        }
        .van-nav-bar__left, .van-nav-bar__right{
            padding:0px !important;
        }
        .van-nav-bar__content{
            background-image:linear-gradient(to right,
          rgb(13, 121, 131),
          rgb(25, 179, 182))
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="is-loading">
            <div class="curtain">
                <div class="loadingBgc">
                    <div class="loader"></div>
                </div>
            </div>
        </div>
        <div class="trainTickets">
            <div class="header_tit">
                <van-nav-bar title="证件扫描" left-arrow>
                    <template #left>
                        <div class="back_l" @click="home"><img src="../image/left.png" alt=""></div>
                    </template>
                </van-nav-bar>
            </div>
            <div></div>
            <div style="padding: 0px 0.25rem; text-align: center" v-if='showConent'>
                <div class="top" @click="functionBtn" ref="top">
                    <img :src="addedPreviewFile" style="width: 100%; height: 100%" alt="" ref="img" class="img"
                        v-if="addedPreviewFile !== ''" />
                    <div v-if="addedPreviewFile == ''">
                        <p class="bgcImg"></p>
                        <p class="nameColor">点击上传图片，将以pdf格式发送内网邮箱</p>
                    </div>
                    <div class="frontandback">
                        <div class="uldisplay1 topImg">
                            <img src="../image/left-1.png" alt="" class="left1" />
                            <img src="../image/left-2.png" alt="" class="left2" />
                        </div>
                        <!-- <p  v-text="clipboard.content"></p> -->
                        <div class="uldisplay1 bottomImg">
                            <img src="../image/bottom-1.png" alt="" class="bottom1" />
                            <img src="../image/bottom-2.png" alt="" class="bottom2" />
                        </div>
                    </div>
                    <div class="line">
                        <img style="display: none; width: 100%" src="../image/scan_line.png" alt="" class="lineFlag"
                            ref="lineFlag" />
                    </div>
                </div>
            </div>
            <div v-if="isflageIOX==true">
                <input type="file" id="inputer" class="file-input4 file-input" @change="funcBtn" style="display: none"
                    ref="inputer" />
            </div>
        </div>
        <div class="foot">
            <button class="del_btn1" @click="home">取消</button>
            <button class="del_btn2" @click="picEmail()">发送邮箱</button>
        </div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    isflageIOX: true,
                    form: "",
                    showConent: true,
                    addedPreviewFile: "", //上传图片的base64
                    num: 1,
                };
            },
            created() {
                this.compatibleInput();
            },
            methods: {
                // 判断安卓还是ios
                compatibleInput() {
                    //获取浏览器的userAgent,并转化为小写
                    var ua = navigator.userAgent.toLowerCase();
                    //判断是否是苹果手机，是则是true
                    var isIos = ua.indexOf("iphone") != -1 || ua.indexOf("ipad") != -1;
                    if (isIos) {
                        this.isflageIOX = true;
                    } else {
                        this.isflageIOX = false;
                    }
                },
                functionBtn() {
                    if (this.isflageIOX == true) {
                        // 打开相册和照相机
                        wx.chooseImage({
                            count: 1, // 默认9
                            sizeType: ["compressed"], // 可以指定是原图还是压缩图，默认二者都有
                            sourceType: ["camera","album"], // 可以指定来源是相册还是相机，默认二者都有
                            quality: 0.1, //压缩质量，范围0～1，数值越小，质量越低，压缩率越高（仅对jpg有效）
                            success: (res) => {
                                var localIds = res.localIds[0]; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                                $(".curtain").css("display", "block");
                                let slocalResPath = "";
                                wx.invoke(
                                    "getLocalResPath", {
                                    localId: localIds,
                                },
                                    (res) => {
                                        slocalResPath = res.localResPath;
                                        // 获取文件信息
                                        wx.invoke(
                                            "ext_FileManager_Information", {
                                            data: {
                                                path: slocalResPath,
                                            },
                                        },
                                            (res) => {
                                                let str = JSON.parse(res.data);
                                                str = str.fileSize.split(".");
                                                // 图片上传限制
                                                if (str[1].indexOf("kB") !== -1) {
                                                    this.getImgBase(localIds);
                                                } else {
                                                    if (str[0] >= 10) {
                                                        $(".curtain").css("display", "none");
                                                        mui.toast("图片过大,请重新选择!", {
                                                            duration: "long",
                                                            type: "div",
                                                        });
                                                    } else {
                                                        this.getImgBase(localIds);
                                                    }
                                                }
                                            }
                                        );
                                    }
                                );
                            },
                        });
                    } else {
                        wx.chooseImage({
                            count: 1, // 默认9
                            sizeType: ["compressed"], // 可以指定是原图还是压缩图，默认二者都有
                            sourceType: ["camera","album"], // 可以指定来源是相册还是相机，默认二者都有
                            quality: 0.1, //压缩质量，范围0～1，数值越小，质量越低，压缩率越高（仅对jpg有效）
                            success: (res) => {
                                var localIds = res.localIds[0]; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                                $(".curtain").css("display", "block");
                                let slocalResPath = "";
                                wx.invoke(
                                    "getLocalResPath", {
                                    localId: localIds,
                                },
                                    (res) => {
                                        slocalResPath = res.localResPath;
                                        wx.invoke(
                                            "ext_FileManager_Information", {
                                            data: {
                                                path: slocalResPath,
                                            },
                                        },
                                            (res) => {
                                                let str = JSON.parse(res.data);
                                                str = str.fileSize.split(".");
                                                if (str[1].indexOf("KB") !== -1) {
                                                    this.getImgBase(localIds);
                                                } else {
                                                    if (str[0] >= 10) {
                                                        $(".curtain").css("display", "none");
                                                        mui.toast("图片过大,请重新选择!", {
                                                            duration: "long",
                                                            type: "div",
                                                        });
                                                    } else {
                                                        this.getImgBase(localIds);
                                                    }
                                                }
                                            }
                                        );
                                    }
                                );
                            },
                        });
                    }
                },
                getImgBase(localIds) {
                    // 根据id取图片的路径
                    wx.getLocalImgData({
                        localId: localIds,
                        success: (res) => {
                            var localData = res.localData;
                            this.addedPreviewFile = localData; // 返回图片的服务器端ID
                            this.getPrintReq();
                        },
                    });
                },

                funcBtn() {
                    $(".curtain").css("display", "block");
                    let inputDOM = this.$refs.inputer;
                    let file = inputDOM.files[0];
                    let re = new FileReader();
                    re.readAsDataURL(file);
                    let that = this;
                    re.onload = (re) => {
                        that.addedPreviewFile = re.target.result;
                        var size = this.showSize(that.addedPreviewFile);
                        if (size > 10000) {
                            $(".curtain").css("display", "none");
                            mui.toast("图片大小不能超过10M", {
                                duration: "long",
                                type: "div",
                            });
                            that.addedPreviewFile = "";
                        } else {
                            this.getPrintReq();
                        }
                    };
                },
                showSize(base64url) {
                    var str = base64url.replace("data:image/png;base64,", "");
                    var equalIndex = str.indexOf("=");
                    if (str.indexOf("=") > 0) {
                        str = str.substring(0, equalIndex);
                    }
                    var strLength = str.length;
                    var fileLength = parseInt(strLength - (strLength / 8) * 2);
                    // 由字节转换为kb
                    var size = "";
                    size = (fileLength / 1024).toFixed(2);
                    var sizeStr = size + ""; //转成字符串
                    var index = sizeStr.indexOf("."); //获取小数点处的索引
                    var dou = sizeStr.substr(index + 1, 2); //获取小数点后两位的值
                    if (dou == "00") {
                        return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2);
                    }
                    return size;
                },
                picEmail() {
                    let userId = sessionStorage.getItem("userId");
                    let Authentication = sessionStorage.getItem("Authentication");
                    let timestamp = new Date().getTime() + "" 
                    let data={
                            userId: userId,
                            timestamp:timestamp,
                            image:this.removeBase64(this.addedPreviewFile),
                            }
                        data = JSON.stringify(data);
                        let sign = sm3(timestamp + "&" + userId)
                    $.ajax({
                            url: localUrlLink + iscp_port + "/document/news/documentSendEmail",
                            type: "post",
                            // async: true, //是否同步，false表示同步请求
                            dataType: "json",
                           data:data,
                            headers: {
                                "Content-Type": "application/json;charset=UTF-8",
                                sign: sign,
                                timestamp: timestamp,
                                userId: userId,
                                Authentication: Authentication
                            },

                            success: (res, txt, xhr) => {
                                if (sm3(res.resultValueStr) == xhr.getResponseHeader("sign")) {
                                    let Authentication = xhr.getResponseHeader("Authentication")
                                    if (res.code == 200) {
                                        this.addedPreviewFile = "";
                                        mui.toast('发送成功', {
                                            duration: 'long',
                                            type: 'div'
                                        })
                                    } else {
                                        mui.toast(res.resultValue, {
                                            duration: 'long',
                                            type: 'div'
                                        })
                                    }
                                } else {
                                    mui.toast('完整性校验失败', {
                                        duration: 'long',
                                        type: 'div'
                                    })
                                }
                            },
                            error: (e) => {
                                mui.toast("请求异常请稍后再试", {
                                    duration: 'long',
                                    type: 'div'
                                })
                            },
                        });
                },
                removeBase64(baseString) {
                   return baseString.replace(/^data:.*?;base64,/,'')
                },
                // 识别接口
                getPrintReq() {
                    let userId = sessionStorage.getItem("userId");
                    let Authentication = sessionStorage.getItem("Authentication");
                    let timestamp = new Date().getTime() + ""
                    let iscp_port
                    if (sessionStorage.getItem("iscp_port")) {
                        iscp_port = sessionStorage.getItem("iscp_port");
                    } else {
                        iscp_port = ""
                    }
                    let data = {
                        image: this.removeBase64(this.addedPreviewFile),
                        userId:userId,
                        timestamp: timestamp,
                    };
                    data = JSON.stringify(data);
                    let sign = sm3(timestamp + "&" + userId)
                    this.$refs.lineFlag.style.display = "block";
                    setTimeout(() => {
                        $(".curtain").css("display", "none");
                        $.ajax({
                            url: localUrlLink + iscp_port + "/document/news/correct_card",
                            type: "post",
                            // async: true, //是否同步，false表示同步请求
                            dataType: "json",
                            data: data,
                            headers: {
                                "Content-Type": "application/json;charset=UTF-8",
                                sign: sign,
                                timestamp: timestamp,
                                userId: userId,
                                Authentication: Authentication
                            },

                            success: (res, txt, xhr) => {
                                if (sm3(res.resultValueStr) == xhr.getResponseHeader("sign")) {
                                    let Authentication = xhr.getResponseHeader("Authentication")
                                    if (res.code == 200) {
                                        this.$refs.lineFlag.style.display = "none";
                                        this.addedPreviewFile = "data:image/jpg;base64," + JSON.parse(res.resultValue).corrected_image_base64
                                        sessionStorage.setItem("Authentication", Authentication);
                                        
                                    } else {
                                        this.$refs.lineFlag.style.display = "none";
                                        mui.toast(res.resultValue, {
                                            duration: 'long',
                                            type: 'div'
                                        })
                                    }
                                } else {
                                    this.$refs.lineFlag.style.display = "none";
                                    mui.toast('完整性校验失败', {
                                        duration: 'long',
                                        type: 'div'
                                    })
                                }
                            },
                            error: (e) => {
                                this.$refs.lineFlag.style.display = "none";
                                mui.toast("请求异常请稍后再试", {
                                    duration: 'long',
                                    type: 'div'
                                })
                            },
                        });
                    }, 400)
                },
                home() {
                    $(location).attr("href", "Home.html");
                },
           
            },
        });
    </script>
</body>

</html>